import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Form } from 'antd';
import { AliyunOSSUpload } from "@/oss";
import { message } from "antd/es";
import ProForm, { ProFormText } from "@ant-design/pro-form";
import { request, useRequest } from "@@/plugin-request/request";


export default (): React.ReactNode => {
  const { loading, data } = useRequest(() => request(`${process.env.hostname}/api/self/detail`))

  if (loading) return (<PageContainer><Card /></PageContainer>)

  return (
    <PageContainer>
      <Card>
        <ProForm
          submitter={{
            searchConfig: {
              resetText: '撤销修改',
            }
          }}
          onFinish={async (values) => {
            request(`${process.env.hostname}/api/self/save`, {
              method: 'post',
              requestType: 'form',
              data: values
            })
            message.success('提交成功');
          }}
          initialValues={data}
        >
          <ProForm.Group>
            <ProFormText
              width="lg"
              name="name"
              label="商户名称"
              placeholder="请输入名称"
            />
          </ProForm.Group>
          <Form.Item name="adBanner" label="广告位图片" style={{ width: "300px" }}>
            <AliyunOSSUpload fileType={'img'}/>
          </Form.Item>
          <ProForm.Group>
            <ProFormText
              width="lg"
              name="adUrl"
              label="广告位跳转链接"
            />
          </ProForm.Group>
        </ProForm>
      </Card>
    </PageContainer>
  );
}
